<!-- 小组成员 -->
<template>
  <view :style="{height : pageHeight + 'px'}" class="content">
    <tui-loading v-if="loadingTips" :isMask="true"></tui-loading>
    <view class="actionBar">
      <view style="flex: 1;">
        <view class="randomGrouping" @tap="GroupNumModal()">
          随机分组
        </view>
      </view>

      <view class="exportList" @tap="exportMember()">
        导出分组名单
      </view>

    </view>

    <view class="groupList">
      <view v-for="(item, index) in groupList" :key="item.id" class="groupItem">
        <view class="groupTitle">
          <view class="groupNum" @tap="editName(item)">
            {{ item.name }}
          </view>
          <view class="leader">
            组长：{{ item.leader }}
            <image mode="aspectFit" src="https://echengtuhua.oss-cn-shenzhen.aliyuncs.com/phoneColorW.png">
            </image>
            {{ item.leaderTel }}
          </view>
        </view>
        <view v-if="item.parties && item.parties.length > 0" class="memberList">
          <view v-for="ite in item.parties" :key="ite.id"
                :class="[ite.role === 1 ? 'memberItem' : 'leaderItem']">
            <view v-if="ite.role === 1" class="memberTag">
              组员
            </view>
            <view v-else class="leaderTag">
              组长
            </view>
            <view class="memberName">
              <image mode="aspectFit"
                     src="https://echengtuhua.oss-cn-shenzhen.aliyuncs.com/passengerIcon.png"></image>
              {{ ite.name }}
            </view>
            <view v-if="ite.role === 1" class="optItem">
              <view class="exchange" @tap="changeGroup(ite)">
                调组
              </view>
              <view class="setLeader" @tap="setLeader(ite)">
                队长
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <!--修改组名-->
    <tui-modal :show="editNameModal" custom maskClosable @cancel="editNameModal = false">
      <view class="tui-modal-custom">
        <tui-input v-model="editNameValue.name" placeholder="请输入组名"></tui-input>
        <tui-button :size="28" height="72rpx" shape="circle" type="primary"
                    @click="postGruopName">确定
        </tui-button>
      </view>
    </tui-modal>

    <!-- 调组 -->
    <tui-modal :show="selectGruopModal" custom maskClosable @cancel="selectGruopModal = false">
      <view class="gruopModalList">
        <view v-for="(item,index) in groupList" :key="index" class="gruopItem" @click="postUpDateGruop(item)">
          {{ item.name }}
        </view>
      </view>
    </tui-modal>
    <!-- 随机分组数量 -->
    <tui-modal :show="editNumModal" custom maskClosable @cancel="editNumModal = false">
      <view class="tui-modal-custom">
        <tui-input v-model="selectGruopNum" placeholder="请输入分组数量,不可超过人员数量" type="number"></tui-input>
        <tui-button :size="28" height="72rpx" shape="circle" type="primary"
                    @click="postRandomGroup()">确定
        </tui-button>
      </view>
    </tui-modal>
    <!-- 导出分组弹窗 -->
    <tui-modal :button="importModalBtn" :show="showImportModal"
               content="由于微信文件下载限制,请复制文件链接到浏览器下载" title="提示"
               @cancel="showImportModal = false" @click="isCopy"></tui-modal>

  </view>
</template>

<script>
import {
  getGroupList,
  editGroupName,
  updateGroup,
  isGruopLeader,
  excelImportOut,
  randomGroup
} from '@/api/tourplan.js'

export default {
  data() {
    return {
      pageHeight: 750,
      groupList: [], //小组列表
      itineraryId: 0, //行程id
      editNameModal: false,
      editNameValue: {},
      loadingTips: false,
      selectGruopModal: false,
      updateGroupItem: {},
      selectGruopNum: '',
      editNumModal: false,
      showImportModal: false,
      importModalBtn: [{
        text: "一键复制",
        type: "primary",
        plain: false
      }],
    }
  },
  onLoad(data) {
    const that = this
    uni.getSystemInfo({
      success: function (res) {
        that.pageHeight = res.windowHeight
      }
    });
    that.initData(data)
  },
  methods: {
    //初始化数据
    initData(data) {
      const that = this
      that.itineraryId = data.itineraryId
      that.getGroupInfo()
    },

    //获取团队成员列表
    getGroupInfo() {
      const that = this
      that.loadingTips = true
      getGroupList({
        itineraryId: that.itineraryId,
        tel: uni.getStorageSync('userinfo').phone
      }).then(res => {
        that.groupList = res
        that.loadingTips = false
      }).catch(err => {
        console.log(err)
        that.loadingTips = false
        uni.showToast({
          title: err,
          icon: 'none',
          duration: 3000
        })
      })
    },

    //修改组名
    editName(item) {
      this.editNameValue = item
      this.editNameModal = true
    },
    //提交修改名字
    postGruopName() {
      const that = this
      editGroupName({
        name: that.editNameValue.name,
        groupId: that.editNameValue.id
      }).then(res => {
        that.getGroupInfo()
        this.editNameModal = false
      }).catch(err => {
        console.log(err)
        that.loadingTips = false
        uni.showToast({
          title: err,
          icon: 'none',
          duration: 3000
        })
      })
    },

    //导出操作
    exportMember() {
      const that = this
      excelImportOut({
        itineraryId: that.itineraryId
      }).then(res => {
        that.importUrl = res.url
        that.showImportModal = true
      }).catch(err => {
        console.log(err)
        that.loadingTips = false
        uni.showToast({
          title: err,
          icon: 'none',
          duration: 3000
        })
      })
    },
    // 随机分组数量选择弹窗
    GroupNumModal() {
      this.editNumModal = true
    },

    //随机分组
    postRandomGroup() {
      const that = this
      // console.log();
      // if (this.selectGruopNum > this.groupList.length) {
      // 	return uni.showToast({
      // 		title: '分组数不可超过当前成员人数',
      // 		icon: 'none',
      // 		duration: 3000
      // 	})
      // }
      randomGroup({
        groupCount: this.selectGruopNum,
        itineraryId: this.itineraryId
      }).then(res => {
        uni.showToast({
          title: '分组成功',
          icon: 'success',
          duration: 3000
        })
        this.editNumModal = false
        this.getGroupInfo()
      }).catch(err => {
        console.log(err)
        that.loadingTips = false
        uni.showToast({
          title: err,
          icon: 'none',
          duration: 3000
        })
      })

    },

    //调组弹窗
    changeGroup(ite) {
      //接收参与者id
      const that = this
      console.log(ite)
      that.updateGroupItem.partyId = ite.id
      that.updateGroupItem.groupPartyId = ite.groupPartyId
      this.selectGruopModal = true
    },
    //提交调组
    postUpDateGruop(item) {
      const that = this
      that.loadingTips = true
      updateGroup({
        id: that.updateGroupItem.groupPartyId,
        partyId: that.updateGroupItem.partyId,
        groupId: item.id
      }).then(res => {
        that.getGroupInfo()
        this.selectGruopModal = false
      }).catch(err => {
        console.log(err)
        that.loadingTips = false
        uni.showToast({
          title: err,
          icon: 'none',
          duration: 3000
        })
      })
    },

    //设为组长
    setLeader(ite) {
      const that = this
      console.log(ite)
      isGruopLeader({
        id: ite.id,
        role: 2
      }).then(res => {
        this.getGroupInfo()
        this.editNameModal = false
      }).catch(err => {
        uni.showToast({
          title: err,
          icon: 'none',
          duration: 3000
        })
      })
    },

    isCopy() {
      uni.setClipboardData({
        data: this.importUrl,
        success: function () {
          uni.showToast({
            title: '复制成功',
            icon: 'none',
            duration: 2000
          })
        }
      });
      this.downModal = false
    },

  }
}
</script>

<style>
@import url('groupManage.css');
</style>
